<template>
  <md-popup v-model="show" position="bottom">
    <md-popup-title-bar only-close :title="$t('dao.create')" title-align="left" @cancel="show = false" />
    <div class="page-dao-create" style="background: #fff; padding: 20px">
      <div class="money">10000 <b>HWD</b></div>
      <div style="padding-top: 25px">
        <md-button type="primary" :loading="loading" @click="action" round>{{ $t('confirm') }}</md-button>
      </div>
    </div>
  </md-popup>
</template>

<script setup>
import { ref } from 'vue'
import { toast } from '@/style'
import { t } from '@/lang'
import { allowance, approve } from '@/web3/contracts/hwd';
import { buy, address } from '@/web3/contracts/dao';

const emit = defineEmits(['update'])

const show = ref(false)
const loading = ref(false)

const open = (data) => {
  show.value = true
}

const action = async() => {
  // 打包数据
  if(Number(await allowance(address)) == 0) {
    // 授权
    toast(t('contracts.usdt.approve'), 'ring', 0)
    try{
      await approve(address)
    } catch(e) {
      return toast(false)
    }
  }
  loading.value = true
  buy().then(res => {
    toast(t('over'))
    show.value = false
    emit('update')
  }).catch(() => {
    toast(t('error'))
  }).finally(() => {
    loading.value = false
  })
}

defineExpose({ open })

</script>
<style lang="scss" scoped>
  .page-dao-create{
    background: #fff;
    .money{
      text-align: center;
      font-size: 30px;
      b{
        font-size: 18px;
        padding-left: 5px;
        color: #888;
      }
    }
  }
</style>